<template>
	<view>
		<view class="node" style="display: flex; justify-content: space-between; align-items: center;">
			<text :style="textStyle" @click="selectNode">{{ node.name }}</text>
			<view v-if="node.isBottomNode!='0'">
				<image class="images-icon" v-if="isOpen" @click="toggleChildrens" src="../static/images/jiantouxia.png"
					mode=""></image>
				<image class="images-icon" v-else-if="node.children.length>0" @click="toggleChildren"
					src="../static/images/jiantoushang.png" mode=""></image>
			</view>
		</view>
		<view v-if="isOpen && hasChildren" class="children">
			<TreeNode v-for="child in node.children" :key="child.id" :node="child" @handleNodeChange="handleNodeChange"
				@selectNode="selectNodeRow" />
		</view>
	</view>
</template>

<script>
	import TreeNode from '@/components/tradeUnionComponents.vue';

	export default {
		name: "TreeNode",
		checkAll: null,
		components: {
			TreeNode
		},
		props: {
			node: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				isOpen: false
			};
		},
		computed: {
			hasChildren() {
				return true;
			},
			textStyle() {
				return {
					fontSize: '14px',
					fontWeight: Number(this.node.nodeType) < 2 ? 400 : 700,
					letterSpacing: '0px',
					lineHeight: '20.27px',
					color: Number(this.node.nodeType) < 2 ? 'rgba(102, 102, 102, 1)' : 'rgba(51, 51, 51, 1)'
				};
			}
		},
		methods: {
			handleNodeChange(childNode) {
				this.$emit("handleNodeChange", childNode);
			},

			selectNodeData(childNode) {
				this.$emit("selectNode", childNode);
			},

			selectNodeRow(row) {
				this.selectNodeData(row);
			},

			selectNode() {
				this.selectNodeData(this.node);
			},
			toggleChildren() {
				if (this.hasChildren) {
					this.isOpen = !this.isOpen;
					this.handleNodeChange(this.node);
				}
			},
			toggleChildrens() {
				if (this.hasChildren) {
					this.isOpen = !this.isOpen;
				}
			}
		}
	}
</script>

<style scoped>
	.node {
		width: 90%;
		margin: 20rpx ;
		font-weight: 700;
	}

	.node :active {
		color: red;
	}

	.children {
		margin-left: 15rpx;
	}

	.images-icon {
		width: 25rpx;
		height: 14rpx;
	}
</style>